<template>
  <div>
    <!-- 卡片视图区域 -->
    <el-card body-style="padding:10px">
      <!-- 搜索与添加区域 -->
      <el-row>
        <el-col :span="5">
          <el-input
            size="small"
            v-model="searchName"
            placeholder="请输入查找的名称"
          >
            <el-button
              slot="append"
              @click="searchByName"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="3">
          <template>
            <el-select
              size="small"
              v-model="levelSelected"
              placeholder="请选择"
            >
              <el-option
                v-for="item in levelOptions"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </template>
        </el-col>
      </el-row>
    </el-card>
    <el-table :data="paginationList" border>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="权限名称" prop="Pname"></el-table-column>
      <el-table-column label="路径" prop="Ppath"></el-table-column>
      <el-table-column label="权限等级" prop="Plevel">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.Plevel === 0">一级权限</el-tag>
          <el-tag v-if="scope.row.Plevel === 1" type="success">二级权限</el-tag>
          <el-tag v-if="scope.row.Plevel === 2" type="warning">三级权限</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div class="paginationBlock" style="margin-top: 15px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[7, 15, 20, 25]"
        :page-size="pageSize"
        layout="total,sizes, prev, pager, next,jumper"
        :total="authorityList.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paginationList: [], // 此数组会由getlivestockInfo()函数调用由authorityList[]数组提取的部分数据存入来控制页面显示数据条数
      authorityList: [],
      currentPage: 1, //当前页码
      pageSize: 7, //每页的数据条数
      searchName: "", //搜索权限名字
      levelOptions: ["一级权限", "二级权限", "三级权限"], //权限等级数组
      levelSelected: "", //被选择的权限等级
    };
  },
  methods: {
    getlivestockInfo() {
      let that = this;
      that.$axios
        .post("http://localhost:8080/PermsServiceAll") //补上后台接口即可
        .then((res) => {
          // 请求成功
          that.authorityList = res.data;
          // console.log(res.data);
          // 获取页面数据后立马调用下面函数
          that.getPageData();
          return;
        })
        .catch((error) => {
          // 请求失败
          console.log("请求失败");
          console.log(error);
        });
    },
    // 获取分页之后的数据
    getPageData() {
      let start = (this.currentPage - 1) * this.pageSize;
      let end = start + this.pageSize;
      this.paginationList = this.authorityList.slice(start, end);
    },
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val;
      this.getPageData();
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getPageData();
    },
    searchByName() {
      if (this.searchName === "") {
        this.getlivestockInfo();
      } else {
        let params = new URLSearchParams();
        params.append("searchName", this.searchName);
        this.$axios
          .post("http://localhost:8080/PerSearchByname", params)
          .then((res) => {
            this.authorityList = res.data;
            this.getPageData();
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
  watch: {
    levelSelected(newValue) {
      let levelKeyIndex = 0;
      if (newValue.indexOf("二") !== -1) {
        levelKeyIndex = 1;
      } else if (newValue.indexOf("三") !== -1) {
        levelKeyIndex = 2;
      }
      this.$axios
        .get(
          `http://localhost:8080/PerSearchBylevelid?levelKeyIndex=${levelKeyIndex}`
        )
        .then((res) => {
          this.authorityList = res.data;
          this.getPageData();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getlivestockInfo();
  },
};
</script>

<style scoped>
.el-popper[x-placement^="bottom"] {
  margin-top: 5px;
}
.el-card .el-col {
  margin-right: 8px;
}
</style>
